* {
    margin: 0;
    padding: 0;
}


/* 主体 */

.box {
    width: 100%;
    height: 100%;
    /* border: 2px solid red; */
    /* position: relative; */
}


/* 头部 */

.header {
    width: 100%;
    height: 390px;
    /* border: 1px solid darkblue; */
}


/* 中间 */

.centext {
    margin: 0 auto;
    width: 980px;
    height: 1425px;
    min-height: 700px;
    border: 1px solid darkgreen;
    /* background: slateblue; */
    position: relative;
}


/* 主体左边的框 */

.centext .left-top {
    width: 75%;
    height: 100%;
    position: absolute;
    background: salmon;
}

.centext .right-top {
    width: 25%;
    position: absolute;
    right: 0;
    height: 100%;
    background: seagreen;
}

.centext .left-top .meg-left-top {
    width: 100%;
    height: 60%;
    border: 1px solid sienna;
}

.centext .left-top .meg-left-bottom {
    width: 100%;
    height: 40%;
    border: 1px solid sienna;
}


/* 尾部 */

.tail {
    width: 100%;
    height: 215px;
    background: rgb(236, 236, 236);
    margin-top: -18px;
    /* position: relative; */
}


/* 尾部文字框 */

.tail .wenzi {
    width: 980px;
    height: 215px;
    margin: 0 auto;
    /* left: 300px; */
    /* position: absolute; */
    background: rgb(236, 236, 236);
}


/* 文字框的 */

.tail .wenzi .link {
    /* width: 520px; */
    height: 24px;
    /* background: darkgray; */
    margin: 20px 0;
    position: relative;
}

.tail .wenzi .link .fam-1 {
    font-size: 16px;
    /* margin-left: 8px; */
    color: #666;
    text-decoration: none;
}

.tail .wenzi .link .fam-1:hover {
    background: none;
}

.tail .wenzi .link span {
    margin: 0 0 10px 8px;
    color: #666;
}


/* 左边的文字 */

.tail .left-mon {
    width: 600px;
    height: 130px;
}


/* 左边每一行的 */

.tail .left-mon .clese {
    width: 600px;
    height: 40px;
    font-size: 14px;
    /* margin-bottom: 15px; */
}


/* .clese的a标签 */

.tail .left-mon .clese a {
    color: #000;
    text-decoration: none;
}


/* 鼠标移动显示下滑线 */

.tail .left-mon .clese a:hover {
    color: #000;
    background: none;
    text-decoration: underline
}


/* 右边的图案---大框 */

.tail .right-mon {
    float: right;
    margin-top: -135px;
    width: 420px;
    /* margin-right: 10px; */
    height: 70px;
}

.tail .right-mon .beng-dg {
    width: 60px;
    height: 70px;
    text-align: center;
    margin-left: 23px;
    text-decoration: none;
    float: left;
}

.tail .right-mon .beng-dg:hover {
    background: none;
}

.tail .right-mon .beng-dg p {
    color: darkgray;
    font-size: 13px;
}


/* 播放栏 dain */

.dain {
    width: 100%;
    height: 53px;
    /* z-index: 15; */
    position: absolute;
    background: #000;
}


/* page-dain居中框 */

.dain {
    width: 100%;
    height: 53px;
    text-shadow: 0 1px 0 #171717;
    background: #333;
}


/* 锁定 */

.dain .dian-locking {
    z-index: 11px;
    position: relative;
}

.dain .dian-locking .left-fe-1 {
    position: absolute;
    top: -15px;
    right: 15px;
    width: 53px;
    height: 67px;
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
    background-position: 0 -380px;
}

.dain .dian-locking .left-fe-1 .btn-botton {
    display: block;
    width: 18px;
    height: 18px;
    margin: 6px 0 0 17px;
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
    background-position: -100px -380px;
}

.dain .dian-locking .left-fe-1 .btn-botton:hover {
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
    background-position: -100px -400px;
}

.dain .dian-locking .right-fe-2 {
    position: absolute;
    right: 0;
    top: -2px;
    width: 15px;
    height: 67px;
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
    background-position: -53px -393px;
}

.dian .left-page {
    height: 53px;
    zoom: 1;
    margin-right: 67px;
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
    background-position: 0 0;
    background-repeat: repeat-x;
}

.dain .hand-locking {
    position: absolute;
    width: 100%;
    height: 20px;
    cursor: pointer;
}

.dain .werp-botton {
    position: absolute;
    left: 50%;
    top: 6px;
    width: 980px;
    height: 47px;
    margin: 0 auto;
    text-shadow: 0 1px 0 #171717;
    background: #333;
    z-index: 15;
}

.dain .btns-botton {
    width: 137px;
    /* height: 36px; */
    float: left;
    padding: 6px 0 0 0;
}


/* 上下首切换 暂停 */

.dain .btns-botton a {
    display: block;
    float: left;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    margin-top: 5px;
    text-indent: -9999px;
}


/* 上一首 */

.dain .btns-botton .pve {
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
    background-position: 0 -130px;
}

.dain .btns-botton .pve:hover {
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
    background-position: -30px -130px;
}


/* 暂停 */

.dain .btns-botton .sop {
    width: 36px;
    height: 36px;
    margin-top: 0;
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
    background-position: 0 -204px;
}

.dain .btns-botton .sop:hover {
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
    background-position: -40px -204px;
}


/* 下一首 */

.dain .btns-botton .pvp {
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
    background-position: -80px -130px;
}

.dain .btns-botton .pvp:hover {
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
    background-position: -110px -130px;
}


/* 图标 */

.dain .head-logo {
    width: 34px;
    height: 34px;
    position: relative;
    margin: 6px 15px 0 0;
}

.dain .head-logo img {
    width: 34px;
    height: 34px;
    position: absolute;
    /* left: 50%; */
}

.dain .head-logo .makes {
    position: absolute;
    width: 34px;
    height: 34px;
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
    top: 0;
    left: 137px;
    background-position: 0 -80px;
}


/* 状态栏 werp-botton 进度条总框 progres-bar  */

.werp-botton .progres-bar {
    width: 581px;
    position: relative;
    /* float: left;s */
    display: block;
}

.werp-botton .progres-bar .bar-words {
    height: 28px;
    overflow: hidden;
    color: #e8e8e8;
    text-shadow: 0 1px 0 #171717;
    line-height: 28px;
}


/* 进度条 */

.m-par-der .bar-bardg {
    width: 466px;
    position: absolute;
    top: -15px;
    left: 190px;
    height: 9px;
    background: url(/ben/imges/progres-bar.png) no-repeat 0 9999px;
    background-position: right 0;
}

.rdy {
    position: absolute;
    background: url(/ben/imges/progres-bar.png) no-repeat 0 9999px;
    background-position: right -30px;
}

.cur {
    position: absolute;
    z-index: 99;
    /* background: red; */
    top: 0;
    left: 0;
    background-position: left -66px;
}


/* 圆点 */

.m-par-der .bar-bardg .cur .f-tdn {
    position: absolute;
    top: -7px;
    right: -13px;
    width: 22px;
    height: 24px;
    margin-left: -11px;
    background: url(/ben/imges/biaodian.png) no-repeat 0 9999px;
    background-position: 0 -250px;
}

.m-par-der .bar-bardg .cur .f-tdn:hover {
    background: url(/ben/imges/biaodian.png) no-repeat 0 9999px;
    background-position: 0 -280px;
}


/* 显示时间 */

.music-time {
    position: absolute;
    top: -9px;
    right: -80px;
    color: #797979;
    text-shadow: 0 1px 0 #121212;
}


/* 歌词收藏分享 */

.open-fm-1 {
    width: 87px;
    position: absolute;
    height: 36px;
    right: 140px;
    top: -5px;
    float: left;
}

.open-fm-1 .icn-2 {
    float: left;
    width: 25px;
    height: 25px;
    margin: 11px 3px 0 0;
    text-indent: -9999px;
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
}


/* 歌词 */

.open-fm-1 .lyric {
    position: relative;
    background: url(/ben/imges/file.png) no-repeat 0 0;
}

.open-fm-1 .lyric:hover {
    background: url(/ben/imges/file.png) no-repeat 0 -25px;
}


/* 收藏 */

.open-fm-1 .collection {
    background-position: -88px -163px;
}

.open-fm-1 .collection:hover {
    background-position: -88px -189px;
}


/* 分享 */

.open-fm-1 .share {
    background-position: -119px -163px;
}

.open-fm-1 .share:hover {
    background-position: -119px -189px;
}


/* 音量循环歌单 */

.ctrl-fm-2 {
    position: absolute;
    z-index: 10;
    width: 113px;
    top: 0;
    right: 0;
    margin-left: 13px;
    height: 36px;
}

.ctrl-fm-2 .icn-2 {
    float: left;
    width: 25px;
    height: 25px;
    margin: 11px 3px 0 0;
    text-indent: -9999px;
    background: url(/ben/imges/d.png) no-repeat 0 9999px;
}

.ctrl-fm-2 .volume {
    background-position: -2px -248px;
}

.ctrl-fm-2 .volume:hover {
    background-position: -31px -248px;
}

.ctrl-fm-2 .loop {
    background-position: -3px -344px;
}

.ctrl-fm-2 .loop:hover {
    background-position: -33px -344px;
}

.ctrl-fm-2 .song-sheet {
    background-position: -42px -68px;
}

.ctrl-fm-2 .song-sheet:hover {
    background-position: -42px -98px;
}